<template>
  <div class="article-container">
    <van-cell>

         <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <van-row type="flex" justify="space-around">
            <van-col span="16">
             <!-- 标题 -->
          <span>{{title}}</span>
            </van-col>
            <van-col span="8">
             <!-- 单张图片 -->
          <img v-if="cover.type==1" :src="cover.images[0]" alt="" class="thumb">
            </van-col>
          </van-row>

        </div>

        <!-- 三张图片 -->

        <div v-if="(cover.type==3)" class="thumb-box">
          <van-row type="flex" justify="space-around">
            <!-- vant提供的布局标签确实可以让标签自身是那个自适应的宽度了，但是里面的子元素就不一定是了，尤其是img这种行内块元素，默认宽度不是100%
                 对于这种，我们要van-col配合width100%使用 -->
            <van-col span="8"><img :src="cover.images[0]" alt="" class="thumb"></van-col>
            <van-col span="8"><img :src="cover.images[1]" alt="" class="thumb"></van-col>
            <van-col span="8"> <img :src="cover.images[2]" alt="" class="thumb"></van-col>
          </van-row>
        </div>

      </template>

<!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <van-row type="flex">
            <van-col span="6">{{author}} &nbsp;&nbsp; </van-col>
            <van-col span="4">({{comm_count}})评论 &nbsp;&nbsp;</van-col>
            <van-col span="13">发布日期:{{pubdate}}</van-col>
            <!-- 关闭按钮 -->
          <van-icon name="cross" />
          </van-row>
        </div>
      </template>

    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      require: true
    },
    title: {
      type: String,
      default: '加载中'
    },
    cover: {
      type: Object,
      default: undefined
    },
    author: {
      tyep: String,
      default: '佚名'
    },
    comm_count: {
      type: Number,
      default: 0
    },
    pubdate: {
      type: String,
      default: ''
    }

  }
}
</script>
<style scoped lang="less">
img{
  width: 100%;
}
.title-box{
  span{
    font-size: 16px;
  }
}
.thumb-box{
  font-size: 14px;
}
// .article-container{
//   width:100%;
// }
// .van-cell__title{
//   width: 100%;
// }
// .title-box{
//   width: 100%;
//   display: flex;
//   flex-wrap: wrap;
//   justify-content: space-around;
//   img{
//     width: 30%;
//   }
//   span{
//     width:100%;
//     font-size: 16px;
//     flex: 16;
//   }
// }
// .thumb-box{
//   width: 100%;
//   display: flex;
//   justify-content: space-around;
//   img{
//     width: 30%;
//   }
// }
</style>
